<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button type="primary" @click="showCreateView"><i class="el-icon-plus" style="margin-right: 5px"></i>添加</el-button>
                </el-form-item>

                <el-form-item>
                    <el-cascader v-model="query.cate_id" :options="cateList" :props="cateProps" clearable  placeholder="请选择商品分类"></el-cascader>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="客户姓名 / 手机号" clearable></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="getTableData">搜索</el-button>
                <el-button type="warning" @click="resetQuery">重置</el-button>
            </el-form>
        </div>
    </div>

    <el-table ref="tableView" class="page-body" :data="tableData" height="tableHeight" border>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="商品ID" prop="id" width="100" align="center"></el-table-column>
        <el-table-column label="商品分类" prop="category" width="180" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-tag v-for="item in scope.row.category" :key="item.id">{{ item.title }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="title"></el-table-column>
        <el-table-column label="商品售价" prop="price" width="100" align="center"></el-table-column>
        <!-- <el-table-column label="销量" prop="sales"></el-table-column> -->
        <el-table-column label="排序" prop="sort" width="100" align="center"></el-table-column>
        <el-table-column label="规格类型" prop="sort" width="100" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.spec_type == 1">多规格</span>
                <span v-else>单规格</span>
            </template>
        </el-table-column>

        <el-table-column label="赠送" width="100" align="center">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.is_present == 1" type="success" @click="switchGiftStatus(scope.row)">参与</el-tag>
                <el-tag v-else type="danger" @click="switchGiftStatus(scope.row)">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="is_show" width="100" align="center">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.is_show == 1" type="success" @click="switchShowStatus(scope.row)">上架</el-tag>
                <el-tag v-else type="danger" @click="switchShowStatus(scope.row)">下架</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="showUpdateView(scope.row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page-foot">
        <div class="left"></div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>
</div>
</template>

<script>
import pagination from "@/components/mixins/pagination.vue";
import pickerView from "@/components/picker/index.vue";

// 商品相关接口
import {
    getGoodsListApi,
    productSwitchShowApi,
    productSwitchGiftApi
} from "@/api/product/goods";
// 商品分类相关接口
import {
    getCategoryPickerApi
} from "@/api/product/category";

export default {
    components: {
        pickerView
    },
    mixins: [pagination],
    data() {
        return {
            query: {
                cate_id: "",
                keyword: ""
            },
            tableData: [],
            cateList: [],
            cateProps: {
                label: 'title',
                value: 'id',
                emitPath: false,
                checkStrictly: false,
                showAllLevels: false,
                multiple: false,
                collapseTags: true,
            },
        }
    },
    created() {
        this.getGoodsCateList();
        this.getTableData();
    },
    methods: {
        getGoodsCateList() {
            getCategoryPickerApi({}).then(res => {
                this.cateList = res.data.list
            })
        },
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;
            getGoodsListApi(params).then(res => {
                this.tableData = res.data.list;
                this.setPg(res);
            });
        },
        doSearch() {
            this.resetPg();
            this.getTableData();
        },
        resetQuery() {
            this.query = {
                cate_id: "",
                keyword: ""
            };
            this.getTableData();
        },
        // 切换赠送状态
        switchGiftStatus(row) {
            let status = row.is_present == 1 ? 0 : 1;
            this.$confirm(`确认${status == 1 ? '开启' : '关闭'}赠送该商品吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                productSwitchGiftApi({
                    id: row.id,
                    is_present: status
                }).then(() => {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        // 切换显示状态
        switchShowStatus(row) {
            let status = row.is_show == 1 ? 0 : 1;
            this.$confirm(`确认${status == 1 ? '上架' : '下架'}该商品吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                productSwitchShowApi({
                    id: row.id,
                    is_show: status
                }).then(() => {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        showCreateView() {
            this.$router.push('/product/goods/create');
        },
        showUpdateView(id) {
            this.$router.push(`/product/goods/update?id=${id}`);
        }
    }
}
</script>

<style>

</style>
